import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqBanner } from '../../request/api'
import { imgPre } from '../../request/http'
import { Swiper } from 'antd-mobile'
import { Link } from 'react-router-dom'
import './Mine.less'
import me from '../../assets/img/me.jpg'
import redpacket from '../../assets/img/red_envelopes.png'
import user_oreder from '../../assets/img/user_order.png'



export default class Mine extends Component {
  constructor() {
    super()
    this.state = {
      banner: []
    }
  }
  render() {
    let { banner } = this.state

    return (
      <div className='mine'>
        <Header title="我的" back register></Header>
        <div className='user'>
          <div className='msg'>
            <div>
              <img src={me} alt="" />
            </div>
            <div>
              <h4>代用名</h4>
              <span>完善资料让小U更懂你</span>
            </div>
            <div>
              <div className='right'>
                <img src={redpacket} alt="" />
                <span className='signin'>每日签到</span>
              </div>
            </div>
          </div>
          <div className='nav'>
            <Link to=''>
              <span>12</span>
              <p>我的收藏</p>
            </Link>
            <Link to=''>
              <span>12</span>
              <p>浏览记录</p>
            </Link>
            <Link to=''>
              <span>0</span>
              <p>我的红包</p>
            </Link>
            <Link to='/coupon'>
              <span>12</span>
              <p>优惠券</p>
            </Link>
          </div>
          <div className='order'>
            <div className='order_title'>
              <h3>我的订单</h3>
              <Link to=''>全部订单</Link>
            </div>
            <div className='order_nav'>
              <Link to=''>
                <span><img src={user_oreder} alt="" /></span>
                <p>待付款</p>
              </Link>
              <Link to=''>
              <span><img src={user_oreder} alt="" /></span>
                <p>待收货</p>
              </Link>
              <Link to=''>
              <span><img src={user_oreder} alt="" /></span>
                <p>评价</p>
              </Link>
              <Link to='/coupon'>
              <span><img src={user_oreder} alt="" /></span>
                <p>售后/退款</p>
              </Link>
            </div>
          </div>
        </div>
        <div className='banner'>
          <Swiper autoplay style={{ "--height": "4rem" }}>

            {banner.map(item => {
              return <Swiper.Item key={item.id}>
                <img src={imgPre + item.img} alt="" style={{ 'width': '100%', 'height': '100%' }} />
              </Swiper.Item>
            })}
          </Swiper>
        </div>
      </div>
    )
  }
  componentDidMount() {
    reqBanner().then(res => {
      this.setState({
        banner: res.data.list
      })
    })
  }
}
